<template>
  <div id="message">
    <el-card class="body" body-style="{border-radius: 5%;padding:10px;}">
      <div id="title">我的资料</div>
    </el-card>
    <el-card class="body" body-style="{border-radius: 5%;padding:10px;}">
      <div class="scp">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="name">
            <el-input disabled v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-input v-model="ruleForm.sex"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birth">
            <el-input v-model="ruleForm.birth"></el-input>
          </el-form-item>
          <el-form-item label="绑定电话" prop="tel">
            <el-input v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="绑定电话" prop="tel">
            <el-input v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">更新</el-button>
            <el-button>清空</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name:"金金jin",
        tel:"15159993883",
        birth:"2001-04-18",
        sex:"男"
      },
      rules: {
        name: [
        ],
        tel: [
          { required: true, message: "绑定电话不能为空" },
          { type: "number", message: "请输入正确的联系电话" },
        ],
        sex: [
          { required: true, message: "性别不能为空", trigger: "blur" },
        ],
        birth: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
    };
  },
};
</script>

<style scoped>
#title {
  font-size: 24px;
}
.body {
  margin: 10px 0px;
}
.scp {
  margin: 10px auto;
  width: 50%;
  text-align: center;
}
</style>